<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<view class="wrapper">
			<view class="left-top-sign">任务app</view>
			<view class="welcome">{{zcmsg}}</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input class="input" type="number" v-model="mobile" placeholder="请输入手机号码" placeholder-class="placeholder" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="mobile" v-model="password" v-bind:focus="this.paswfocus" placeholder="6-20位不含特殊字符的数字、字母组合" placeholder-class="input-empty" maxlength="20"
					 password data-key="password" />
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
			<view class="u-f u-f-jsb" style="padding: 10upx 50upx;">
				<view class="" style="padding: 10upx 28upx;color: #999;" @tap="onzctap()">马上注册</view>
				<view class="" style="padding: 10upx 28upx;color: #999;" @tap="onset()">设置密码?</view>
			</view>
		</view>
		<view class="dsfdlbox">
			<view class="titleb u-f u-f-ajc">
				<text class="">
					使用合作账号登录
				</text>
			</view>
			<view class="u-f u-f-ajc dlg">
				<view class="u-f-column u-f-ac" @click="loginyzy">
					<image src="../../static/icon/dlicon_wx.svg"></image>
					<view>微信</view>
				</view>
			</view>
		</view>
		<view class="footerbox">
		<checkbox></checkbox>已阅并同意<text @click="xieyi">《用户协议》</text><text @click="xieyi1">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				mobile: '',
				password: '',
				logining: false,
				userfocus: false,
				paswfocus: false,
				openid:'',
				zcmsg:"欢迎回来！",
			};
		},
		onLoad() {
	
		},
		methods: {
			...mapMutations(['login']),
			onset(){
				uni.navigateTo({
					url: '/pages/public/zhmm/zhmm'
				})
			},
			onzctap() {
				uni.navigateTo({
					url: '/pages/public/zhuce/zhuce'
				})
			},
			navBack() {
				uni.navigateBack();
			},
		
			isPhone(){
				let mPattern = /^1[345678]\d{9}$/; 
				return mPattern.test(this.inputValue);
			},
			xieyi(){
			uni.navigateTo({
			url:"/pages/xieyi/xieyi"	
			})	
			},
			xieyi1(){
			uni.navigateTo({
			url:"/pages/xieyi1/xieyi1"	
			})		
			},
			async toLogin() {
				if(!this.mobile){
					uni.showToast({ title: '手机号不能为空',icon:"none" });
					this.userfocus= true
					return false;
				}
				if(!this.password){
					uni.showToast({ title: '密码不能为空',icon:"none" });
					this.paswfocus= true
					return false;
				}
				let data = {'account':this.mobile,'password':this.password};
				// #ifdef APP-PLUS
				//	var inf = plus.push.getClientInfo();
					//if(inf.clientid){data.clientid=inf.clientid}
					//if(plus.os.name == 'iOS') {data.iostoken=inf.token}
					//data.issb=plus.os.name
				// #endif
				
				if(this.openid){
					data.openid=this.openid;
				}
				var that=this;
				//this.ongrzlTap();
				uni.request({
					url: that.$serverUrl + '/index.php/Mobile/index/login',
					data:data,
					success: (ret) => {
						console.log(ret.data);
						//console.log('data', ret);
						if (ret.data.status !=200) {
							this.$api.msg('登录失败');
							this.logining = false;
						} else {
						  if(ret.data.userinfo.head_pic){
								var str = ret.data.userinfo.head_pic;
								if(str.indexOf("data:image") != -1){
									var avatar='';
								}else{
									if(str.indexOf("http") != -1){
										var avatar=ret.data.userinfo.head_pic;
									}else{
										var avatar=this.config.imgUrl+ret.data.userinfo.head_pic;
									}
								}
							}else{
								var avatar='';
							}
							var dataARR={
							"id":ret.data.userinfo.user_id,
							"mobile":ret.data.userinfo.mobile,
							"nickname":ret.data.userinfo.nickname,
							"portrait":avatar,
							"token":ret.data.userinfo.token,
							"shenhe":ret.data.userinfo.is_distribut,
							"openid":ret.data.userinfo.openid,
							}
							
							this.logining = true;
							this.login(dataARR);
							
							
							uni.navigateBack();
						}
					}
				});		
				/**let [err,res] =await this.$http.get('/api/user/login',data);
				if (!this.$http.errorCheck(err,res)) return;
				
				if (res.data.code === 1) { //登录成功跳转
					if(res.data.data.userinfo.avatar){
						var str = res.data.data.userinfo.avatar;
						if(str.indexOf("data:image") != -1){
							var avatar='';
						}else{
							if(str.indexOf("http") != -1){
								var avatar=res.data.data.userinfo.avatar;
							}else{
								var avatar=this.config.imgUrl+res.data.data.userinfo.avatar;
							}
						}
					}else{
						var avatar='';
					}
				var dataARR={
						"id":res.data.data.userinfo.id,
						"mobile":res.data.data.userinfo.mobile,
						"nickname":res.data.data.userinfo.nickname,
						"portrait":avatar,
						"token":res.data.data.userinfo.token,
						"shenhe":res.data.data.userinfo.shenhe,
						"openid":res.data.data.userinfo.openid,
						}
						
						this.logining = true;
						this.login(dataARR);
						
						uni.setStorage({//缓存配置信息
							key: 'config',  
							data: res.data.data.config
						})
						uni.navigateBack();
				} else {
					this.$api.msg(res.data.msg);
					this.logining = false;
				}**/
			},
			loginyzy() {
				var thia = this;
				var that = this;
				uni.login({
					provider: 'weixin',
					onlyAuthorize:'true',
					success: function(loginRes) {
					 console.log(loginRes)
					  const code = loginRes.code;
					   let data = {};
					    data.code=code;
					 uni.request({
					 	url: that.$serverUrl + '/index.php/Mobile/index/weilogin',
					 	data: data,
					 	success: ret =>{
					 		console.log(ret)
					 		if(ret.data.status==200){
					 		var dataARR={
					 				"id":ret.data.userinfo.user_id,
					 				"mobile":ret.data.userinfo.mobile,
					 				"nickname":ret.data.userinfo.nickname,
					 				"portrait":ret.data.userinfo.head_pic,
					 				"token":ret.data.userinfo.token,
					 				"shenhe":ret.data.userinfo.is_distribut,
					 				"openid":ret.data.userinfo.openid,
					 				}
					 				
					 				that.logining = true;
					 				that.login(dataARR);
					 				
					 				
					 				uni.navigateBack();
					 			
					 		}else{
					 			this.$api.msg('获取失败');
					 			this.logining = false;
					 		}
					 	},
					 	fail: (data, code) => {
					 		//console.log('fail' + JSON.stringify(data));
					 	}
					 });	
					},
					fail(res){
					console.log(res)	
					}
				});
			},
			async uplpenid(infoRes){
				let [err,res] = await this.$http.post('/apip/index/wxlogin',{openid:infoRes.openId},{token:false});
				if (!this.$http.errorCheck(err,res)) return;
				if(res.data.code === 1){
					if(res.data.data.userinfo.headimgurl){
							var str = res.data.data.userinfo.headimgurl;
							if(str.indexOf("data:image") != -1){
								var avatar='';
							}else{
								if(str.indexOf("http") != -1){
									var avatar=res.data.data.userinfo.headimgurl;
								}else{
									var avatar=this.config.imgUrl+res.data.data.userinfo.headimgurl;
								}
							}
						}else{
							var avatar='';
						}
					var dataARR={
							"id":res.data.data.userinfo.id,
							"mobile":res.data.data.userinfo.phone,
							"nickname":res.data.data.userinfo.nickname,
							"portrait":avatar,
							"token":res.data.data.userinfo.token,
							"shenhe":res.data.data.userinfo.shenhe,
							"openid":res.data.data.userinfo.openid,
							}
							
							this.logining = true;
							this.login(dataARR);
							
							uni.setStorage({//缓存配置信息
								key: 'config',  
								data: res.data.data.config
							})
							uni.navigateBack();
				}else{
					this.logining = false;
					uni.navigateTo({
						url: `/pages/public/zhuce/zhuce?openId=${infoRes.openId}&nickName=${infoRes.nickName}&avatarUrl=${infoRes.avatarUrl}`
					});
				}
			}
		},
		onShow() {
			if(this.openid){
				this.zcmsg="绑定账号登录！"
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.container {
		padding-top: 20px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.titleb {
		margin-top: 30px;
		width: 100%;
		height: 10upx;
		position: relative;
	}

	.titleb text {
		width: 140px;
		text-align: center;
		position: absolute;
		font-size: 28upx;
		color: #999;
		left: 50%;
		margin-left: -70px;
		background: #fff;
		z-index: 2;
	}

	.titleb:after {
		position: absolute;
		left: 20upx;
		right: 20upx;
		content: '';
		width: auto;
		height: 1upx;
		background: #ddd;
		z-index: 1;
	}

	.dlg {
		margin-top: 20px;
	}

	.dlg>view {
		margin: 0 20upx;
	}

	.dlg>view>view {
		color: #999;
	}

	.dlg>view image {
		width: 104upx;
		height: 104upx;
		border-radius: 50%;
		display: block;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: 10upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: '';
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -350upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 40upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: #E17503;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm + 2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

	.dsfdlbox {
		position: absolute;
		left: 0;
		bottom: 70upx;
		width: 100%;
	}

	.footerbox {
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 10upx;
		width: 100%;
		font-size: 26upx;
		color: #666;
	}

	.footerbox text {
		color: #0077CC;
	}
</style>
